<!DOCTYPE HTML>

<html>
    <head>
        <script type="application/ld+json">
    {
        "@context" : "http://schema.org",
        "@type" : "BlogPosting",
        "mainEntityOfPage": {
             "@type": "WebPage",
             "@id": "\/blog\/"
        },
        "articleSection" : "blog",
        "name" : "实现模拟注册及登录",
        "headline" : "实现模拟注册及登录",
        "description" : "mff的个人博客",
        "inLanguage" : "en",
        "author" : "",
        "creator" : "",
        "publisher": "",
        "accountablePerson" : "",
        "copyrightHolder" : "",
        "copyrightYear" : "2020",
        "datePublished": "2020-04-28 00:00:00 \x2b0000 UTC",
        "dateModified" : "2020-04-28 00:00:00 \x2b0000 UTC",
        "url" : "\/blog\/blog\/%E5%AE%9E%E7%8E%B0%E6%A8%A1%E6%8B%9F%E6%B3%A8%E5%86%8C%E7%99%BB%E5%BD%95\/",
        "wordCount" : "854",
        "keywords" : [ "tutorial","Blog" ]
    }
    </script>
        
            
                <title>实现模拟注册及登录</title>
            
        

        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="generator" content="Hugo 0.69.0" />
        
  
    
  

  

  <link rel="apple-touch-icon-precomposed" href='/blog/favicon/apple-touch-icon-precomposed.png'>
  <link rel="icon" href='/blog/favicon/favicon.png'>
  
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="msapplication-TileImage" content='/favicon/mstile.png'>
  <meta name="application-name" content="mff blog">
  <meta name="msapplication-tooltip" content="">
  <meta name="msapplication-config" content='/favicon/ieconfig.xml'>



        
            <meta name="author" content="mff">
        
        
            <meta name="description" content="mff的个人博客">
        

        <meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="实现模拟注册及登录"/>
<meta name="twitter:description" content="mff的个人博客"/>

        <meta property="og:title" content="实现模拟注册及登录" />
<meta property="og:description" content="mff的个人博客" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/blog/blog/%E5%AE%9E%E7%8E%B0%E6%A8%A1%E6%8B%9F%E6%B3%A8%E5%86%8C%E7%99%BB%E5%BD%95/" />
<meta property="article:published_time" content="2020-04-28T00:00:00+00:00" />
<meta property="article:modified_time" content="2020-04-28T00:00:00+00:00" />

        <meta property="og:image" content="/blog//images/logo.png">
        <meta property="og:image:type" content="image/png">
        <meta property="og:image:width" content="512">
        <meta property="og:image:height" content="512">
        <meta itemprop="name" content="实现模拟注册及登录">
<meta itemprop="description" content="mff的个人博客">
<meta itemprop="datePublished" content="2020-04-28T00:00:00&#43;00:00" />
<meta itemprop="dateModified" content="2020-04-28T00:00:00&#43;00:00" />
<meta itemprop="wordCount" content="854">



<meta itemprop="keywords" content="tutorial," />
        

        
            
        

        
        
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-light.min.css">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800,900|Source+Sans+Pro:400,700">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css">
            <link rel="stylesheet" href="/blog/css/main.css">
            <link rel="stylesheet" href="/blog/css/add-on.css">
            <link rel="stylesheet" href="/blog/css/academicons.min.css">
        

        
            
                
            
        


  
    
    <link href='//cdn.bootcss.com/highlight.js/9.11.0/styles/github.min.css' rel='stylesheet' type='text/css' />
  


      
    </head>
    <body>

      
      <div id="wrapper">

    
    
<header id="header">
    
      <h1><a href="/blog/">blog</a></h1>
    

    <nav class="links">
        <ul>
            
                <li>
                    <a href="/blog/">
                            <i class="fa fa-home">&nbsp;</i>主页
                    </a>
                </li>
            
                <li>
                    <a href="/blog/blog/">
                            <i class="fa fa-newspaper-o">&nbsp;</i>Blog笔记
                    </a>
                </li>
            
                <li>
                    <a href="https://mff-project.gitee.io/hugoblog/posts/%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/">
                            <i class="fa fa-id-card-o">&nbsp;</i>个人简历
                    </a>
                </li>
            
                <li>
                    <a href="/blog/itemized/">
                            <i class="fa fa-list">&nbsp;</i>最近项目
                    </a>
                </li>
            
                <li>
                    <a href="/blog/contact/">
                            <i class="fa fa-envelope-o">&nbsp;</i>联系我
                    </a>
                </li>
            
        </ul>
    </nav>
    <nav class="main">
        <ul>
            
            <li id="share-nav" class="share-menu" style="display:none;">
                <a class="fa-share-alt" href="#share-menu">Share</a>
            </li>
            
            <li class="search">
                <a class="fa-search" href="#search">Search</a>
                <form id="search" method="get" action="//google.com/search">
                    <input type="text" name="q" placeholder="Search" />
                    <input type="hidden" name="as_sitesearch" value="/blog/">
                </form>
            </li>
            <li class="menu">
                <a class="fa-bars" href="#menu">Menu</a>
            </li>
        </ul>
    </nav>
</header>


<section id="menu">

    
        <section>
            <form class="search" method="get" action="//google.com/search">
                <input type="text" name="q" placeholder="Search" />
                <input type="hidden" name="as_sitesearch" value="/blog/">
            </form>
        </section>

    
        <section>
            <ul class="links">
                
                    <li>
                        <a href="/blog/">
                            <h3>
                                <i class="fa fa-home">&nbsp;</i>主页
                            </h3>
                        </a>
                    </li>
                
                    <li>
                        <a href="/blog/blog/">
                            <h3>
                                <i class="fa fa-newspaper-o">&nbsp;</i>Blog笔记
                            </h3>
                        </a>
                    </li>
                
                    <li>
                        <a href="https://mff-project.gitee.io/hugoblog/posts/%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/">
                            <h3>
                                <i class="fa fa-id-card-o">&nbsp;</i>个人简历
                            </h3>
                        </a>
                    </li>
                
                    <li>
                        <a href="/blog/itemized/">
                            <h3>
                                <i class="fa fa-list">&nbsp;</i>最近项目
                            </h3>
                        </a>
                    </li>
                
                    <li>
                        <a href="/blog/contact/">
                            <h3>
                                <i class="fa fa-envelope-o">&nbsp;</i>联系我
                            </h3>
                        </a>
                    </li>
                
            </ul>
        </section>

    
        <section class="recent-posts">
            <div class="mini-posts">
                <header>
                    <h3>Recent Posts</h3>
                </header>
                

                
                    
                

                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/blog/fastdfs%E9%85%8D%E7%BD%AE%E5%8F%8A%E4%BB%8B%E7%BB%8D/">FastDFS配置及介绍</a></h3>
                                
                                <time class="published" datetime=
                                    '2020-08-27'>
                                    August 27, 2020</time>
                            </header>
                            

                        </article>
                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/blog/orm%E5%B8%B8%E8%A7%84%E6%93%8D%E4%BD%9C%E9%87%8D%E7%82%B9/">orm常规操作</a></h3>
                                
                                <time class="published" datetime=
                                    '2020-07-28'>
                                    July 28, 2020</time>
                            </header>
                            

                        </article>
                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/blog/%E6%94%AF%E4%BB%98%E5%AE%9D%E6%B2%99%E7%AE%B1%E6%94%AF%E4%BB%98%E6%93%8D%E4%BD%9C/">支付宝沙箱支付操作</a></h3>
                                
                                <time class="published" datetime=
                                    '2020-07-28'>
                                    July 28, 2020</time>
                            </header>
                            

                        </article>
                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/blog/%E8%85%BE%E8%AE%AF%E7%9F%AD%E4%BF%A1%E5%8F%91%E9%80%81%E9%AA%8C%E8%AF%81%E7%A0%81/">腾讯短信发送验证码</a></h3>
                                
                                <time class="published" datetime=
                                    '2020-07-28'>
                                    July 28, 2020</time>
                            </header>
                            

                        </article>
                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/blog/flask&#43;vue%E5%AE%9E%E7%8E%B0%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/">flask&#43;vue实现前后端分离</a></h3>
                                
                                <time class="published" datetime=
                                    '2020-07-26'>
                                    July 26, 2020</time>
                            </header>
                            

                        </article>
                

                
                    <a href=
                        
                            /blog/
                        
                        class="button">View more posts</a>
                
            </div>
        </section>

    
        
</section>

    <section id="share-menu">
    <section id="social-share-nav">
        <ul class="links">
            <header>
                <h3>Share this post <i class="fa fa-smile-o"></i></h3>
            </header>
            



<li>
  <a href="//twitter.com/share?url=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f&amp;text=%e5%ae%9e%e7%8e%b0%e6%a8%a1%e6%8b%9f%e6%b3%a8%e5%86%8c%e5%8f%8a%e7%99%bb%e5%bd%95&amp;via=" target="_blank" class="share-btn twitter">
    <i class="fa fa-twitter"></i>
    <p>Twitter</p>
    </a>
</li>




<li>
  <a href="//plus.google.com/share?url=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f" target="_blank" class="share-btn google-plus">
    <i class="fa fa-google-plus"></i>
    <p>Google+</p>
  </a>
</li>





<li>
  <a href="//www.facebook.com/sharer/sharer.php?u=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f" target="_blank" class="share-btn facebook">
    <i class="fa fa-facebook"></i>
    <p>Facebook</p>
    </a>
</li>




<li>
  <a href="//reddit.com/submit?url=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f&amp;title=%e5%ae%9e%e7%8e%b0%e6%a8%a1%e6%8b%9f%e6%b3%a8%e5%86%8c%e5%8f%8a%e7%99%bb%e5%bd%95" target="_blank" class="share-btn reddit">
    <i class="fa fa-reddit-alien"></i>
    <p>Reddit</p>
  </a>
</li>




<li>
  <a href="//www.linkedin.com/shareArticle?url=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f&amp;title=%e5%ae%9e%e7%8e%b0%e6%a8%a1%e6%8b%9f%e6%b3%a8%e5%86%8c%e5%8f%8a%e7%99%bb%e5%bd%95" target="_blank" class="share-btn linkedin">
      <i class="fa fa-linkedin"></i>
      <p>LinkedIn</p>
    </a>
</li>




<li>
  <a href="//www.stumbleupon.com/submit?url=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f&amp;title=%e5%ae%9e%e7%8e%b0%e6%a8%a1%e6%8b%9f%e6%b3%a8%e5%86%8c%e5%8f%8a%e7%99%bb%e5%bd%95" target="_blank" class="share-btn stumbleupon">
    <i class="fa fa-stumbleupon"></i>
    <p>StumbleUpon</p>
  </a>
</li>




<li>
  <a href="//www.pinterest.com/pin/create/button/?url=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f&amp;description=%e5%ae%9e%e7%8e%b0%e6%a8%a1%e6%8b%9f%e6%b3%a8%e5%86%8c%e5%8f%8a%e7%99%bb%e5%bd%95" target="_blank" class="share-btn pinterest">
    <i class="fa fa-pinterest-p"></i>
    <p>Pinterest</p>
  </a>
</li>




<li>
  <a href="mailto:?subject=Check out this post by mff&amp;body=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f" target="_blank" class="share-btn email">
    <i class="fa fa-envelope"></i>
    <p>Email</p>
  </a>
</li>


        </ul>
    </section>
</section>

    
    <div id="main">
        
        
        <article class="post">
  <header>
    <div class="title">
        
            <h1><a href="/blog/blog/%E5%AE%9E%E7%8E%B0%E6%A8%A1%E6%8B%9F%E6%B3%A8%E5%86%8C%E7%99%BB%E5%BD%95/">实现模拟注册及登录</a></h1>
            
        
        
            <p>mff的个人博客</p>
        
    </div>
    <div class="meta">
        

        <time class="published"
            datetime='2020-04-28'>
            April 28, 2020</time>
        <span class="author">mff</span>
        
            <p>5 minute read</p>
        
        
    </div>
</header>


  
    <section id="social-share">
      <ul class="icons">
        



<li>
  <a href="//twitter.com/share?url=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f&amp;text=%e5%ae%9e%e7%8e%b0%e6%a8%a1%e6%8b%9f%e6%b3%a8%e5%86%8c%e5%8f%8a%e7%99%bb%e5%bd%95&amp;via=" target="_blank" class="share-btn twitter">
    <i class="fa fa-twitter"></i>
    <p>Twitter</p>
    </a>
</li>




<li>
  <a href="//plus.google.com/share?url=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f" target="_blank" class="share-btn google-plus">
    <i class="fa fa-google-plus"></i>
    <p>Google+</p>
  </a>
</li>





<li>
  <a href="//www.facebook.com/sharer/sharer.php?u=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f" target="_blank" class="share-btn facebook">
    <i class="fa fa-facebook"></i>
    <p>Facebook</p>
    </a>
</li>




<li>
  <a href="//reddit.com/submit?url=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f&amp;title=%e5%ae%9e%e7%8e%b0%e6%a8%a1%e6%8b%9f%e6%b3%a8%e5%86%8c%e5%8f%8a%e7%99%bb%e5%bd%95" target="_blank" class="share-btn reddit">
    <i class="fa fa-reddit-alien"></i>
    <p>Reddit</p>
  </a>
</li>




<li>
  <a href="//www.linkedin.com/shareArticle?url=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f&amp;title=%e5%ae%9e%e7%8e%b0%e6%a8%a1%e6%8b%9f%e6%b3%a8%e5%86%8c%e5%8f%8a%e7%99%bb%e5%bd%95" target="_blank" class="share-btn linkedin">
      <i class="fa fa-linkedin"></i>
      <p>LinkedIn</p>
    </a>
</li>




<li>
  <a href="//www.stumbleupon.com/submit?url=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f&amp;title=%e5%ae%9e%e7%8e%b0%e6%a8%a1%e6%8b%9f%e6%b3%a8%e5%86%8c%e5%8f%8a%e7%99%bb%e5%bd%95" target="_blank" class="share-btn stumbleupon">
    <i class="fa fa-stumbleupon"></i>
    <p>StumbleUpon</p>
  </a>
</li>




<li>
  <a href="//www.pinterest.com/pin/create/button/?url=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f&amp;description=%e5%ae%9e%e7%8e%b0%e6%a8%a1%e6%8b%9f%e6%b3%a8%e5%86%8c%e5%8f%8a%e7%99%bb%e5%bd%95" target="_blank" class="share-btn pinterest">
    <i class="fa fa-pinterest-p"></i>
    <p>Pinterest</p>
  </a>
</li>




<li>
  <a href="mailto:?subject=Check out this post by mff&amp;body=%2fblog%2fblog%2f%25E5%25AE%259E%25E7%258E%25B0%25E6%25A8%25A1%25E6%258B%259F%25E6%25B3%25A8%25E5%2586%258C%25E7%2599%25BB%25E5%25BD%2595%2f" target="_blank" class="share-btn email">
    <i class="fa fa-envelope"></i>
    <p>Email</p>
  </a>
</li>


      </ul>
    </section>
  

  

  <div id="content">
    <h3 id="实现模拟注册及登录">实现模拟注册及登录</h3>
<hr>
<p>Django后端</p>
<ol>
<li>app中新建一个user.py文件</li>
</ol>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#75715e"># 导入加密库</span>
<span style="color:#f92672">import</span> hashlib
<span style="color:#75715e"># 导入API视图</span>
<span style="color:#f92672">from</span> rest_framework.views <span style="color:#f92672">import</span> APIView
<span style="color:#75715e"># 这里的导入以实现了迁移文件的models文件中的模型</span>
<span style="color:#f92672">from</span> myapp.models <span style="color:#f92672">import</span> User
<span style="color:#75715e"># 返回前端数据响应的包</span>
<span style="color:#f92672">from</span> rest_framework.response <span style="color:#f92672">import</span> Response

<span style="color:#75715e"># md5加密方法</span>
<span style="color:#66d9ef">def</span> <span style="color:#a6e22e">make_password</span>(mypass):
    <span style="color:#75715e"># 生成md5对象</span>
    md5 <span style="color:#f92672">=</span> hashlib<span style="color:#f92672">.</span>md5()
    <span style="color:#75715e"># 转码操作</span>
    mypass_utf8 <span style="color:#f92672">=</span> str(mypass)<span style="color:#f92672">.</span>encode(encoding<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;utf-8&#34;</span>)
    <span style="color:#75715e"># 加密操作</span>
    md5<span style="color:#f92672">.</span>update(mypass_utf8)
    <span style="color:#75715e"># 返回密文</span>
    <span style="color:#66d9ef">return</span> md5<span style="color:#f92672">.</span>hexdigest()

<span style="color:#75715e"># 注册接口</span>
<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Register</span>(APIView):
    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get</span>(self,request):
        <span style="color:#75715e"># 接收参数</span>
        username <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>GET<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;username&#39;</span>,None)
        password <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>GET<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;password&#39;</span>,None)
        <span style="color:#75715e"># 排除重复</span>
        user <span style="color:#f92672">=</span> User<span style="color:#f92672">.</span>objects<span style="color:#f92672">.</span>filter(username<span style="color:#f92672">=</span>username)<span style="color:#f92672">.</span>first()
        <span style="color:#66d9ef">if</span> user:
            <span style="color:#66d9ef">return</span> Response({<span style="color:#e6db74">&#39;code&#39;</span>:<span style="color:#ae81ff">403</span>,<span style="color:#e6db74">&#39;message&#39;</span>:<span style="color:#e6db74">&#39;用户名已存在&#39;</span>})
        <span style="color:#75715e"># 入库</span>
        user <span style="color:#f92672">=</span> User(username<span style="color:#f92672">=</span>username,password<span style="color:#f92672">=</span>make_password(password))
        <span style="color:#75715e"># 保存结果</span>
        user<span style="color:#f92672">.</span>save()
        <span style="color:#66d9ef">return</span> Response({<span style="color:#e6db74">&#39;code&#39;</span>:<span style="color:#ae81ff">200</span>,<span style="color:#e6db74">&#39;message&#39;</span>:<span style="color:#e6db74">&#39;注册成功&#39;</span>})
    
<span style="color:#75715e"># 登录接口</span>
<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Login</span>(APIView):
    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get</span>(self,request):
        <span style="color:#75715e"># 接收参数</span>
        username <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>GET<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;username&#39;</span>,None)
        password <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>GET<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;password&#39;</span>,None)

        <span style="color:#75715e"># 查询数据</span>
        user <span style="color:#f92672">=</span> User<span style="color:#f92672">.</span>objects<span style="color:#f92672">.</span>filter(username<span style="color:#f92672">=</span>username,password<span style="color:#f92672">=</span>make_password(password))<span style="color:#f92672">.</span>first()
        <span style="color:#66d9ef">if</span> user:
            <span style="color:#66d9ef">return</span> Response({<span style="color:#e6db74">&#39;code&#39;</span>:<span style="color:#ae81ff">200</span>,<span style="color:#e6db74">&#39;message&#39;</span>:<span style="color:#e6db74">&#39;登录成功&#39;</span>,<span style="color:#e6db74">&#39;uid&#39;</span>:user<span style="color:#f92672">.</span>id,<span style="color:#e6db74">&#39;username&#39;</span>:user<span style="color:#f92672">.</span>username})
        <span style="color:#66d9ef">else</span>:
            <span style="color:#66d9ef">return</span> Response({<span style="color:#e6db74">&#39;code&#39;</span>:<span style="color:#ae81ff">403</span>,<span style="color:#e6db74">&#39;message&#39;</span>:<span style="color:#e6db74">&#39;您的用户名或密码错误&#39;</span>})
</code></pre></div><ol start="2">
<li>配置好注册及登录URL，后端实现注册及登录接口</li>
</ol>
<hr>
<p>vue.js前端</p>
<ol>
<li>
<p>新建register.vue文件</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        &lt;<span style="color:#f92672">myheader</span>&gt;&lt;/<span style="color:#f92672">myheader</span>&gt;
   
        &lt;<span style="color:#f92672">section</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;featured-block text-center&#34;</span>&gt;
            &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;container&#34;</span>&gt;
                &lt;<span style="color:#f92672">div</span>&gt;
                    &lt;<span style="color:#f92672">Breadcrumb</span> <span style="color:#f92672">:datas</span><span style="color:#e6db74">=&#34;datas&#34;</span>&gt;&lt;/<span style="color:#f92672">Breadcrumb</span>&gt;
                &lt;/<span style="color:#f92672">div</span>&gt;
            &lt;/<span style="color:#f92672">div</span>&gt;
        &lt;/<span style="color:#f92672">section</span>&gt;
        &lt;<span style="color:#f92672">div</span>&gt;
            &lt;<span style="color:#f92672">table</span>&gt;
                &lt;<span style="color:#f92672">tr</span>&gt;
                    &lt;<span style="color:#f92672">td</span>&gt;
                        <span style="color:#a6e22e">用户名</span><span style="color:#960050;background-color:#1e0010">：</span>
                    &lt;/<span style="color:#f92672">td</span>&gt;
                    &lt;<span style="color:#f92672">td</span>&gt;
                        &lt;<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#f92672">v-model</span><span style="color:#e6db74">=&#34;username&#34; placeholder=&#34;请输入用户名&#34;&gt;
</span><span style="color:#e6db74">                    &lt;/td&gt;
</span><span style="color:#e6db74">                &lt;/tr&gt;
</span><span style="color:#e6db74">                &lt;tr&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;
</span><span style="color:#e6db74">                        密码：
</span><span style="color:#e6db74">                    &lt;/td&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;
</span><span style="color:#e6db74">                        &lt;input type=&#34;password&#34; v-model=&#34;password&#34; placeholder=&#34;请输入密码&#34;&gt;
</span><span style="color:#e6db74">                    &lt;/td&gt;
</span><span style="color:#e6db74">                &lt;/tr&gt;
</span><span style="color:#e6db74">                &lt;tr&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;&lt;/td&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;&lt;Button @click=&#34;submit&#34; color=&#34;blue&#34;&gt;提交&lt;/Button&gt;&lt;/td&gt;
</span><span style="color:#e6db74">                &lt;/tr&gt;
</span><span style="color:#e6db74">            &lt;/table&gt;
</span><span style="color:#e6db74">        &lt;/div&gt;
</span><span style="color:#e6db74">        &lt;footer class=&#34;footer&#34;&gt;
</span><span style="color:#e6db74">            &lt;div class=&#34;container&#34;</span>&gt;
                <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">v3u.cn</span>
            &lt;/<span style="color:#f92672">div</span>&gt;
        &lt;/<span style="color:#f92672">footer</span>&gt;
    &lt;/<span style="color:#f92672">div</span>&gt;
     
&lt;/<span style="color:#f92672">template</span>&gt;
   
&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">myheader</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./myheader.vue&#39;</span>
<span style="color:#75715e">// 导入组件
</span><span style="color:#75715e"></span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">data</span>(){
        <span style="color:#66d9ef">return</span>{
            <span style="color:#75715e">// 表单数据
</span><span style="color:#75715e"></span>            <span style="color:#a6e22e">username</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>,
            <span style="color:#a6e22e">password</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>,
            <span style="color:#a6e22e">msg</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;这是一个变量&#34;</span>,
            <span style="color:#75715e">// 面包屑导航变量
</span><span style="color:#75715e"></span>            <span style="color:#a6e22e">datas</span><span style="color:#f92672">:</span>[{<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;首页&#39;</span>,<span style="color:#a6e22e">route</span><span style="color:#f92672">:</span>{<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;index&#39;</span>}},{<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;注册页面&#39;</span>}]
        }
    },
    <span style="color:#75715e">// 引入header头部样式组件
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span>{
        <span style="color:#e6db74">&#39;myheader&#39;</span><span style="color:#f92672">:</span><span style="color:#a6e22e">myheader</span>
    },
    <span style="color:#a6e22e">mounted</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
   
    },
    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
        <span style="color:#a6e22e">submit</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
            <span style="color:#75715e">// 用户名非空验证
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">username</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#39;&#39;</span>){
                <span style="color:#75715e">// 自动化页面组件提供的样式，用于前端弹出信息
</span><span style="color:#75715e"></span>                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#e6db74">&#39;您没有输入用户名&#39;</span>);
                <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>;
            }
            <span style="color:#75715e">// 密码非空验证
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">password</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#39;&#39;</span>){
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#e6db74">&#39;您没有输入密码&#39;</span>);
                <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>;
            }
            <span style="color:#75715e">// 请求后台接口
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#39;http://127.0.0.1:8000/register/&#39;</span>,{<span style="color:#a6e22e">params</span><span style="color:#f92672">:</span>{<span style="color:#a6e22e">username</span><span style="color:#f92672">:</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">username</span>,<span style="color:#a6e22e">password</span><span style="color:#f92672">:</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">password</span>}}).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">result</span>)=&gt;{
                <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">result</span>);
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>);
            })
        }
    }
   
}
&lt;/<span style="color:#f92672">script</span>&gt;
   
&lt;<span style="color:#f92672">style</span>&gt;
    <span style="color:#a6e22e">td</span> {
        <span style="color:#a6e22e">padding</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">10</span><span style="color:#a6e22e">px</span>;
    }
&lt;/<span style="color:#f92672">style</span>&gt;
</code></pre></div></li>
<li>
<p>配置好register前端路由，启动服务</p>
</li>
<li>
<p>新建login.vue文件(这里的实现登录逻辑与注册差不多一样)</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        &lt;<span style="color:#f92672">myheader</span>&gt;&lt;/<span style="color:#f92672">myheader</span>&gt;
   
        &lt;<span style="color:#f92672">section</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;featured-block text-center&#34;</span>&gt;
            &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;container&#34;</span>&gt;
                &lt;<span style="color:#f92672">div</span>&gt;
                    &lt;<span style="color:#f92672">Breadcrumb</span> <span style="color:#f92672">:datas</span><span style="color:#e6db74">=&#34;datas&#34;</span>&gt;&lt;/<span style="color:#f92672">Breadcrumb</span>&gt;
                &lt;/<span style="color:#f92672">div</span>&gt;
            &lt;/<span style="color:#f92672">div</span>&gt;
        &lt;/<span style="color:#f92672">section</span>&gt;
        &lt;<span style="color:#f92672">div</span>&gt;
            &lt;<span style="color:#f92672">table</span>&gt;
                &lt;<span style="color:#f92672">tr</span>&gt;
                    &lt;<span style="color:#f92672">td</span>&gt;
                        <span style="color:#a6e22e">用户名</span><span style="color:#960050;background-color:#1e0010">：</span>
                    &lt;/<span style="color:#f92672">td</span>&gt;
                    &lt;<span style="color:#f92672">td</span>&gt;
                        &lt;<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#f92672">v-model</span><span style="color:#e6db74">=&#34;username&#34; placeholder=&#34;请输入用户名&#34;&gt;
</span><span style="color:#e6db74">                    &lt;/td&gt;
</span><span style="color:#e6db74">                &lt;/tr&gt;
</span><span style="color:#e6db74">                &lt;tr&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;
</span><span style="color:#e6db74">                        密码：
</span><span style="color:#e6db74">                    &lt;/td&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;
</span><span style="color:#e6db74">                        &lt;input type=&#34;password&#34; v-model=&#34;password&#34; placeholder=&#34;请输入密码&#34;&gt;
</span><span style="color:#e6db74">                    &lt;/td&gt;
</span><span style="color:#e6db74">                &lt;/tr&gt;
</span><span style="color:#e6db74">                &lt;tr&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;&lt;/td&gt;
</span><span style="color:#e6db74">                    &lt;td&gt;&lt;Button @click=&#34;submit&#34; color=&#34;blue&#34;&gt;提交&lt;/Button&gt;&lt;/td&gt;
</span><span style="color:#e6db74">                &lt;/tr&gt;
</span><span style="color:#e6db74">            &lt;/table&gt;
</span><span style="color:#e6db74">        &lt;/div&gt;
</span><span style="color:#e6db74">        &lt;footer class=&#34;footer&#34;&gt;
</span><span style="color:#e6db74">            &lt;div class=&#34;container&#34;</span>&gt;
                <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">v3u.cn</span>
            &lt;/<span style="color:#f92672">div</span>&gt;
        &lt;/<span style="color:#f92672">footer</span>&gt;
    &lt;/<span style="color:#f92672">div</span>&gt;
     
&lt;/<span style="color:#f92672">template</span>&gt;
   
&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">myheader</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./myheader.vue&#39;</span>
<span style="color:#75715e">// 导入组件
</span><span style="color:#75715e"></span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">data</span>(){
        <span style="color:#66d9ef">return</span>{
            <span style="color:#75715e">// 表单数据
</span><span style="color:#75715e"></span>            <span style="color:#a6e22e">username</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>,
            <span style="color:#a6e22e">password</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>,
            <span style="color:#a6e22e">msg</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;这是一个变量&#34;</span>,
            <span style="color:#75715e">// 面包屑导航变量
</span><span style="color:#75715e"></span>            <span style="color:#a6e22e">datas</span><span style="color:#f92672">:</span>[{<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;首页&#39;</span>,<span style="color:#a6e22e">route</span><span style="color:#f92672">:</span>{<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;index&#39;</span>}},{<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;登录页面&#39;</span>}]
        }
    },
    <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span>{
        <span style="color:#e6db74">&#39;myheader&#39;</span><span style="color:#f92672">:</span><span style="color:#a6e22e">myheader</span>
    },
    <span style="color:#a6e22e">mounted</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
   
    },
    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
        <span style="color:#a6e22e">submit</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
            <span style="color:#75715e">// 用户名非空验证
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">username</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#39;&#39;</span>){
                <span style="color:#75715e">// 自动化页面组件提供的样式，用于前端弹出信息
</span><span style="color:#75715e"></span>                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#e6db74">&#39;您没有输入用户名&#39;</span>);
                <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>;
            }
            <span style="color:#75715e">// 密码非空验证
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">password</span> <span style="color:#f92672">==</span> <span style="color:#e6db74">&#39;&#39;</span>){
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#e6db74">&#39;您没有输入密码&#39;</span>);
                <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>;
            }
            <span style="color:#75715e">// 请求后台接口
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#39;http://127.0.0.1:8000/login/&#39;</span>,{<span style="color:#a6e22e">params</span><span style="color:#f92672">:</span>{<span style="color:#a6e22e">username</span><span style="color:#f92672">:</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">username</span>,<span style="color:#a6e22e">password</span><span style="color:#f92672">:</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">password</span>}}).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">result</span>)=&gt;{
                <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">result</span>);
                <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">code</span> <span style="color:#f92672">==</span> <span style="color:#ae81ff">403</span>){
                    <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>);
                    <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>;
                }
                <span style="color:#75715e">//登录成功
</span><span style="color:#75715e"></span>                <span style="color:#66d9ef">else</span>{
                <span style="color:#75715e">// 这里用于实现在前端localStorage中永久性存入用户信息，便于实现用户登录后的一些功能
</span><span style="color:#75715e"></span>                <span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">setItem</span>(<span style="color:#e6db74">&#34;username&#34;</span>,<span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">username</span>);
                <span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">setItem</span>(<span style="color:#e6db74">&#34;uid&#34;</span>,<span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">uid</span>);
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>);
                <span style="color:#75715e">//跳转首页
</span><span style="color:#75715e"></span>                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$router</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">&#39;/&#39;</span>);
                }
            });
        }
    }
   
}
&lt;/<span style="color:#f92672">script</span>&gt;
   
&lt;<span style="color:#f92672">style</span>&gt;
    <span style="color:#a6e22e">td</span> {
        <span style="color:#a6e22e">padding</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">10</span><span style="color:#a6e22e">px</span>;
    }
&lt;/<span style="color:#f92672">style</span>&gt;
</code></pre></div></li>
<li>
<p>配置好login的URL</p>
</li>
<li>
<p>新建myheader.vue文件(头部样式)</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;
  &lt;<span style="color:#f92672">div</span>&gt;
      &lt;<span style="color:#f92672">section</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;header text-center&#34;</span>&gt;
     &lt;<span style="color:#f92672">nav</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbar navbar-expand-lg navbar-light navbar-custom&#34;</span>&gt;
         &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;container&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbar-brand&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;index.html&#34;</span>&gt;&lt;<span style="color:#f92672">i</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;fas fa-shopping-bag primary-color mr-1&#34;</span>&gt;&lt;/<span style="color:#f92672">i</span>&gt;<span style="color:#a6e22e">美多商城</span>&lt;/<span style="color:#f92672">a</span>&gt;
             &lt;<span style="color:#f92672">button</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbar-toggler&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-toggle</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">collapse</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-target</span><span style="color:#960050;background-color:#1e0010">=&#34;#</span><span style="color:#a6e22e">navbar</span><span style="color:#f92672">-1</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-controls</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">navbar</span><span style="color:#f92672">-1</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-expanded</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">false</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-label</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">Toggle</span> <span style="color:#a6e22e">navigation</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;&lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbar-toggler-icon&#34;</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">button</span>&gt;
             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;collapse navbar-collapse pull-xs-right justify-content-end&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbar-1&#34;</span>&gt;
                 &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbar-nav mt-2 mt-md-0&#34;</span>&gt;
                     &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item active&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Home</span> &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;sr-only&#34;</span>&gt;(<span style="color:#a6e22e">current</span>)&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                     &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item dropdown mega-menu&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link dropdown-toggle&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbarDropdown&#34;</span> <span style="color:#a6e22e">role</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-toggle</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">dropdown</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-haspopup</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">true</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-expanded</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">false</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;<span style="color:#a6e22e">Shop</span> &lt;/<span style="color:#f92672">a</span>&gt;
                         &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-menu&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-labelledby</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">navbarDropdown</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;
                             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;container&#34;</span>&gt;
                                 &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;divider&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                                 &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;row&#34;</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-md-2&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">h6</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-uppercase&#34;</span>&gt;<span style="color:#a6e22e">Women</span><span style="color:#e6db74">&#39;s&lt;/h6&gt;
</span><span style="color:#e6db74">                                         &lt;ul class=&#34;nav flex-column&#34;&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link active&#34; href=&#34;#&#34;&gt;Active&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                         &lt;/ul&gt;
</span><span style="color:#e6db74">                                     &lt;/div&gt;
</span><span style="color:#e6db74">                                     &lt;div class=&#34;col-md-2&#34;&gt;
</span><span style="color:#e6db74">                                         &lt;h6 class=&#34;text-uppercase&#34;&gt;Men&#39;</span><span style="color:#a6e22e">s</span>&lt;/<span style="color:#f92672">h6</span>&gt;
                                         &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav flex-column&#34;</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                         &lt;/<span style="color:#f92672">ul</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-md-2&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">h6</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-uppercase&#34;</span>&gt;<span style="color:#a6e22e">Girl</span><span style="color:#e6db74">&#39;s&lt;/h6&gt;
</span><span style="color:#e6db74">                                         &lt;ul class=&#34;nav flex-column&#34;&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                             &lt;li class=&#34;nav-item&#34;&gt;&lt;a class=&#34;nav-link&#34; href=&#34;#&#34;&gt;Link item&lt;/a&gt;&lt;/li&gt;
</span><span style="color:#e6db74">                                         &lt;/ul&gt;
</span><span style="color:#e6db74">                                     &lt;/div&gt;
</span><span style="color:#e6db74">                                     &lt;div class=&#34;col-md-2&#34;&gt;
</span><span style="color:#e6db74">                                         &lt;h6 class=&#34;text-uppercase&#34;&gt;Boy&#39;</span><span style="color:#a6e22e">s</span>&lt;/<span style="color:#f92672">h6</span>&gt;
                                         &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav flex-column&#34;</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                             &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span>&gt;<span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">item</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                                         &lt;/<span style="color:#f92672">ul</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-md-4&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">h6</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-uppercase&#34;</span>&gt;<span style="color:#a6e22e">Featured</span> <span style="color:#a6e22e">Items</span>&lt;/<span style="color:#f92672">h6</span>&gt;
                                         &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;row&#34;</span>&gt;
                                             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-6 text-center&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;
                                                 &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;images/placeholder-product.jpg&#34;</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;img-fluid mt-2 mb-3&#34;</span>&gt;&lt;/<span style="color:#f92672">a</span>&gt;
                                                 &lt;<span style="color:#f92672">h6</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;mb-0&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;<span style="color:#a6e22e">Product</span> <span style="color:#a6e22e">Name</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">h6</span>&gt;
                                                 &lt;<span style="color:#f92672">p</span>&gt;&lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;emphasis&#34;</span>&gt;<span style="color:#a6e22e">$49</span><span style="color:#ae81ff">.00</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">p</span>&gt;
                                                 &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;btn btn-sm btn-outline-secondary mt-0&#34;</span>&gt;<span style="color:#a6e22e">Buy</span> <span style="color:#a6e22e">Now</span>&lt;/<span style="color:#f92672">a</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-6 text-center&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;
                                                 &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;images/placeholder-product.jpg&#34;</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;img-fluid mt-2 mb-3&#34;</span>&gt;&lt;/<span style="color:#f92672">a</span>&gt;
                                                 &lt;<span style="color:#f92672">h6</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;mb-0&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;<span style="color:#a6e22e">Product</span> <span style="color:#a6e22e">Name</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">h6</span>&gt;
                                                 &lt;<span style="color:#f92672">p</span>&gt;&lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;emphasis&#34;</span>&gt;<span style="color:#a6e22e">$49</span><span style="color:#ae81ff">.00</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">p</span>&gt;
                                                 &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;btn btn-sm btn-outline-secondary mt-0&#34;</span>&gt;<span style="color:#a6e22e">Buy</span> <span style="color:#a6e22e">Now</span>&lt;/<span style="color:#f92672">a</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                         &lt;/<span style="color:#f92672">div</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                 &lt;/<span style="color:#f92672">div</span>&gt;
                             &lt;/<span style="color:#f92672">div</span>&gt;
                         &lt;/<span style="color:#f92672">div</span>&gt;
                     &lt;/<span style="color:#f92672">li</span>&gt;
                     &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item dropdown&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link dropdown-toggle&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbarDropdown&#34;</span> <span style="color:#a6e22e">role</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-toggle</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">dropdown</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-haspopup</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">true</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-expanded</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">false</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;<span style="color:#a6e22e">Pages</span> &lt;/<span style="color:#f92672">a</span>&gt;
                         &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-menu&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-labelledby</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">navbarDropdown</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-item&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;index.html&#34;</span>&gt;<span style="color:#a6e22e">Homepage</span>&lt;/<span style="color:#f92672">a</span>&gt;
                             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-divider&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                             &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-item&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;catalog.html&#34;</span>&gt;<span style="color:#a6e22e">Catalog</span>&lt;/<span style="color:#f92672">a</span>&gt;
                             &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-item&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;<span style="color:#a6e22e">Item</span> <span style="color:#a6e22e">Detail</span>&lt;/<span style="color:#f92672">a</span>&gt;
                             &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-item&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;cart.html&#34;</span>&gt;<span style="color:#a6e22e">Cart</span>&lt;/<span style="color:#f92672">a</span>&gt;
                             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-divider&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                             &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-item&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;contact.html&#34;</span>&gt;<span style="color:#a6e22e">Contact</span>&lt;/<span style="color:#f92672">a</span>&gt;
   
                         &lt;/<span style="color:#f92672">div</span>&gt;
                     &lt;/<span style="color:#f92672">li</span>&gt;
                     &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;contact.html&#34;</span>&gt;<span style="color:#a6e22e">Contact</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                 &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item dropdown&#34;</span>&gt;&lt;<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> /&gt;&lt;/<span style="color:#f92672">li</span>&gt;
                     &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-item dropdown&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav-link dropdown-toggle&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navbarDropdown&#34;</span> <span style="color:#a6e22e">role</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">-toggle</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">dropdown</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-haspopup</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">true</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-expanded</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">false</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;&lt;<span style="color:#f92672">i</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;fas fa-shopping-cart&#34;</span>&gt;&lt;/<span style="color:#f92672">i</span>&gt; &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;badge badge-pill badge-primary&#34;</span>&gt;<span style="color:#ae81ff">3</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">a</span>&gt;
                         &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-menu dropdown-menu-right dropdown-cart&#34;</span> <span style="color:#a6e22e">aria</span><span style="color:#f92672">-labelledby</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">navbarDropdown</span><span style="color:#960050;background-color:#1e0010">&#34;</span>&gt;
                             &lt;<span style="color:#f92672">h6</span>&gt;<span style="color:#ae81ff">3</span> <span style="color:#a6e22e">Items</span> &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;emphasis&#34;</span>&gt;<span style="color:#a6e22e">$147</span><span style="color:#ae81ff">.00</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">h6</span>&gt;
                             &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;dropdown-divider&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                             &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shopping-cart-items&#34;</span>&gt;
                                 &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;row&#34;</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-3&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;images/placeholder-product.jpg&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;60&#34;</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-9&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">h6</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;<span style="color:#a6e22e">Product</span> <span style="color:#a6e22e">Name</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">h6</span>&gt;
                                         &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-muted&#34;</span>&gt;<span style="color:#ae81ff">1</span><span style="color:#a6e22e">x</span>&lt;/<span style="color:#f92672">span</span>&gt;
                                         &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;emphasis&#34;</span>&gt;<span style="color:#a6e22e">$49</span><span style="color:#ae81ff">.00</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                                 &lt;/<span style="color:#f92672">li</span>&gt;
                                 &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;row&#34;</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-3&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;images/placeholder-product.jpg&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;60&#34;</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-9&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">h6</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;<span style="color:#a6e22e">Product</span> <span style="color:#a6e22e">Name</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">h6</span>&gt;
                                         &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-muted&#34;</span>&gt;<span style="color:#ae81ff">1</span><span style="color:#a6e22e">x</span>&lt;/<span style="color:#f92672">span</span>&gt;
                                         &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;emphasis&#34;</span>&gt;<span style="color:#a6e22e">$49</span><span style="color:#ae81ff">.00</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                                 &lt;/<span style="color:#f92672">li</span>&gt;
                                 &lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;row&#34;</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-3&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;images/placeholder-product.jpg&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;60&#34;</span>&gt;
                                     &lt;/<span style="color:#f92672">div</span>&gt;
                                     &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;col-9&#34;</span>&gt;
                                         &lt;<span style="color:#f92672">h6</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;item.html&#34;</span>&gt;<span style="color:#a6e22e">Product</span> <span style="color:#a6e22e">Name</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">h6</span>&gt;
                                         &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-muted&#34;</span>&gt;<span style="color:#ae81ff">1</span><span style="color:#a6e22e">x</span>&lt;/<span style="color:#f92672">span</span>&gt;
                                         &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;emphasis&#34;</span>&gt;<span style="color:#a6e22e">$49</span><span style="color:#ae81ff">.00</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                                 &lt;/<span style="color:#f92672">li</span>&gt;
                             &lt;/<span style="color:#f92672">ul</span>&gt;
   								
                             &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;cart.html&#34;</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;btn btn-lg btn-full-width btn-primary&#34;</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;margin: 0;&#34;</span>&gt;<span style="color:#a6e22e">View</span> <span style="color:#a6e22e">Cart</span>&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
                     &lt;/<span style="color:#f92672">li</span>&gt;
                 &lt;/<span style="color:#f92672">ul</span>&gt;
             &lt;/<span style="color:#f92672">div</span>&gt;
         &lt;/<span style="color:#f92672">div</span>&gt;
         &lt;<span style="color:#f92672">div</span> <span style="color:#f92672">v-if</span><span style="color:#e6db74">=&#34;username == &#39;&#39;&#34;&gt;
</span><span style="color:#e6db74">             &lt;router-link to=&#34;/login&#34;&gt;登  录&lt;/router-link&gt;
</span><span style="color:#e6db74">             /
</span><span style="color:#e6db74">             &lt;router-link to=&#34;/register&#34;&gt;注  册&lt;/router-link&gt;
</span><span style="color:#e6db74">         &lt;/div&gt;
</span><span style="color:#e6db74">         &lt;div v-else&gt;
</span><span style="color:#e6db74">             欢迎您：{{ username }}
</span><span style="color:#e6db74">             &amp;nbsp; &amp;nbsp; &amp;nbsp;
</span><span style="color:#e6db74">             &lt;Button color=&#34;black&#34; @click=&#34;submit&#34;</span>&gt;
                 <span style="color:#a6e22e">登出</span>
             &lt;/<span style="color:#f92672">Button</span>&gt;
         &lt;/<span style="color:#f92672">div</span>&gt;
     &lt;/<span style="color:#f92672">nav</span>&gt;
 &lt;/<span style="color:#f92672">section</span>&gt;
  &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;
   
&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
 <span style="color:#a6e22e">data</span> () {
     <span style="color:#66d9ef">return</span> {
     <span style="color:#a6e22e">msg</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;这是一个变量&#34;</span>,
     <span style="color:#a6e22e">username</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;&#39;</span>,
     }
  },
  <span style="color:#a6e22e">mounted</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
   <span style="color:#75715e">//判断是否登录
</span><span style="color:#75715e"></span>   <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">uname</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">getItem</span>(<span style="color:#e6db74">&#34;username&#34;</span>);
   <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">uname</span><span style="color:#f92672">==</span><span style="color:#66d9ef">null</span>){
       <span style="color:#75715e">//没登录
</span><span style="color:#75715e"></span>       <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">username</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;&#39;</span>;
   }<span style="color:#66d9ef">else</span>{
     <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">username</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">uname</span>;
   }
   
  },
  <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
   <span style="color:#a6e22e">submit</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
       <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#e6db74">&#39;退出成功&#39;</span>);
          <span style="color:#75715e">//清空localStorage中的用户信息
</span><span style="color:#75715e"></span>       window.<span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">clear</span>()
       <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$router</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">&#39;/login&#39;</span>);
   }
        
  }
}
&lt;/<span style="color:#f92672">script</span>&gt;
   
&lt;<span style="color:#f92672">style</span>&gt;
   
&lt;/<span style="color:#f92672">style</span>&gt;
</code></pre></div><p>配置好跨域，实现前后端分离的注册登录</p>
</li>
</ol>
  </div>

  <footer>
    <ul class="stats">
  <li class="categories">
    <ul>
        
            
            
                <i class="fa fa-folder"></i>
                
                
                <li><a class="article-category-link" href="/blog/blog/categories/hugo">Hugo</a></li>
                
            
        
    </ul>
  </li>
  <li class="tags">
    <ul>
        
            
            
                <i class="fa fa-tags"></i>
                
                
                <li><a class="article-category-link" href="/blog/blog/tags/tutorial">tutorial</a></li>
                
            
        
    </ul>
  </li>
</ul>

  </footer>

</article>

    <article class="post">
        <div id="disqus_thread"></div>
<script type="application/javascript">
    var disqus_config = function () {
    
    
    
    };
    (function() {
        if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
            document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
            return;
        }
        var d = document, s = d.createElement('script'); s.async = true;
        s.src = '//' + "shortname" + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
    </article>


<ul class="actions pagination">
    
        <li><a href="/blog/blog/%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84%E9%82%AE%E7%AE%B1%E5%8F%91%E9%80%81/"
                class="button big previous">实现简单的邮箱发送</a></li>
    

    
        <li><a href="/blog/blog/%E5%8F%88%E6%8B%8D%E4%BA%91%E5%AD%98%E5%82%A8%E5%AE%9E%E7%8E%B0%E6%8B%96%E6%8B%BD%E4%B8%8A%E4%BC%A0/"
                class="button big next">实现拖拽上传文件到又拍云存储</a></li>
    
</ul>


    </div>
    
<section id="sidebar">

  
  <section id="intro">
    
    
      
        <a href='/blog/'><img src="/blog/img/main/touxiang3.jpg" class="intro-circle" width="150px" alt="Hugo Future Imperfect" /></a>
      
    
    
      <header>
        <h2>mff</h2>
        <p>Effort is for money, and money is life!</p>
      </header>
    
    
      <ul class="icons">
        
          
    <li><a href="/blog/blog/index.xml" type="application/rss+xml" target="_blank" title="RSS" class="fa fa-rss"></a></li>


        
        












































































  <li><a href="mailto:2980738482@qq.com" title="Email" class="fa fa-envelope"></a></li>


      </ul>
    
  </section>

  
  <section class="recent-posts">
    <div class="mini-posts">
      <header>
        <h3>Recent Posts</h3>
      </header>
      <div class="posts-container">
        

        
          
        

        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/blog/fastdfs%E9%85%8D%E7%BD%AE%E5%8F%8A%E4%BB%8B%E7%BB%8D/">FastDFS配置及介绍</a>
              </h3>
              
              <time class="published" datetime='2020-08-27'>
                August 27, 2020
              </time>
            </header>
            

          </article>
        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/blog/orm%E5%B8%B8%E8%A7%84%E6%93%8D%E4%BD%9C%E9%87%8D%E7%82%B9/">orm常规操作</a>
              </h3>
              
              <time class="published" datetime='2020-07-28'>
                July 28, 2020
              </time>
            </header>
            

          </article>
        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/blog/%E6%94%AF%E4%BB%98%E5%AE%9D%E6%B2%99%E7%AE%B1%E6%94%AF%E4%BB%98%E6%93%8D%E4%BD%9C/">支付宝沙箱支付操作</a>
              </h3>
              
              <time class="published" datetime='2020-07-28'>
                July 28, 2020
              </time>
            </header>
            

          </article>
        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/blog/%E8%85%BE%E8%AE%AF%E7%9F%AD%E4%BF%A1%E5%8F%91%E9%80%81%E9%AA%8C%E8%AF%81%E7%A0%81/">腾讯短信发送验证码</a>
              </h3>
              
              <time class="published" datetime='2020-07-28'>
                July 28, 2020
              </time>
            </header>
            

          </article>
        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/blog/flask&#43;vue%E5%AE%9E%E7%8E%B0%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/">flask&#43;vue实现前后端分离</a>
              </h3>
              
              <time class="published" datetime='2020-07-26'>
                July 26, 2020
              </time>
            </header>
            

          </article>
        
      </div>

      
        <a href=
          
            /blog/
          
        class="button">View more posts</a>
      
    </div>
  </section>

  
  
  
  
  
    <section id="categories">
      <header>
        <h3>
          <a href="/blog/categories/">Categories</a>
        </h3>
      </header>
        
          
        

        
        <p>
          <article>
            <header>
              
                <a href="/blog/categories/hugo/">hugo</a>
                <span style="float:right;">43</span>
              
            </header>
          </article>
        </p>
        
    </section>
  
  

  
  
    <section id="mini-bio">
      <h3>About</h3>
      <p>blog于2018年6月10日创建(It was created on May 10, 2020),文章主要介绍了python的一些常用框架和库及它们的一些用法</p>
      <a href="/blog/about/" class="button">Learn More</a>
    </section>
  

  
  <section id="footer">
    
      <ul class="icons">
        
          
    <li><a href="/blog/blog/index.xml" type="application/rss+xml" target="_blank" title="RSS" class="fa fa-rss"></a></li>


        
        












































































  <li><a href="mailto:2980738482@qq.com" title="Email" class="fa fa-envelope"></a></li>


      </ul>
    
    <p class="copyright">
      
        &copy; 2020
        
          mff blog
        
      .
      Powered by <a href="//gohugo.io" target="_blank">Hugo</a>
    </p>
  </section>
</section>

    </div>
    <a id="back-to-top" href="#" class="fa fa-arrow-up fa-border fa-2x"></a>
    

    
      
    

    
      
      
      
        <script src="//cdn.bootcss.com/highlight.js/9.11.0/highlight.min.js"></script>
        
        
        
        <script src="//cdn.bootcss.com/highlight.js/9.11.0/languages/r.min.js"></script>
        <script src="//cdn.bootcss.com/highlight.js/9.11.0/languages/yaml.min.js"></script>
        <script src="//cdn.bootcss.com/highlight.js/9.11.0/languages/css.min.js"></script>
        <script>hljs.configure({languages: []}); hljs.initHighlightingOnLoad();</script>
      
    
    
    
      <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script>
      <script src="/blog/js/util.js"></script>
      <script src="/blog/js/main.js"></script>
      <script src="/blog/js/backToTop.js"></script>
    

    
      
        
      
    

    
    <script>hljs.initHighlightingOnLoad();</script>
      <script src="//yihui.name/js/math-code.js"></script>
<script async
src="//cdn.bootcss.com/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>


  </body>
</html>

